<template>
    <div class="content_panel project_modules">
        <div class="content_panel_top">
            <el-row :gutter="24">
                <el-col :span="$i18n.locale === 'zhCN' ? 2 : 3">
                    <h3 class="panel_title">
                        <span>{{ $t('pageTitle.homePage') }}</span>
                    </h3>
                </el-col>
                <el-col :span="20">
                    <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                        <el-row :gutter="20">
                            <el-col :span="5">
                                <el-form-item prop="appName">
                                    <el-select v-model="form.appName" :placeholder="$t('system.appName')" style="width:100%;" @change="getData">
                                        <el-option v-for="item in appList" :key="item.id" :value="item.name" :label="item.name" ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-button @click="search" type="primary">{{ $t('common.confirmOk') }}</el-button>
                            </el-col>
                         </el-row>
                    </el-form>
                </el-col>
            </el-row>



        </div>
        <div class="module_content preview_box">
            <h1 class="appname_title">{{nowAppName}}</h1>
            <el-row :gutter="24">
                <h4 style="margin-top:0px;">{{ $t('common.todayData') }}
                    <el-popover
                        placement="left-start"
                        :width="$i18n.locale === 'zhCN' ? '500px' : '800px'"
                        trigger="hover">
                        <div class="explanationDialog">
                            <h2>{{ $t('common.todayData') }}</h2>
                            <div>
                                <p>{{ $t('common.newUser') }} = {{ $t('common.registerNotApplyUser') }}</p><!--新户-->
                                <p>{{ $t('common.oldUser') }} = {{ $t('common.loanSuccessUser') }}</p><!--老户-->
                                <p>{{ $t('common.secNewUser') }} = {{ $t('common.applyNotSuccessUser') }}</p><!--次新户-->
                                <p>{{ $t('common.registerAmount') }} = {{ $t('common.dayRegisterNumber') }}</p><!--注册人数-->
                                <p>{{ $t('common.applyAmount') }} = {{ $t('common.dayApplyNumber') }}</p><!--申请笔数-->
                                <p>{{ $t('common.loanSuccessAmount') }} = {{ $t('common.dayLoanSuccessNumber') }}</p><!--放款成功笔数-->
                                <p>{{ $t('common.loanAmount') }} = {{ $t('common.dayLoanSuccessAmount') }}</p><!--放款金额-->
                                <p>{{ $t('common.contractAmount') }} = {{ $t('common.todayContractAmount') }}</p><!--合同金额-->
                                <p>{{ $t('common.passRate') }} = {{ $t('common.dayPassRate') }}</p><!--通过率-->
                                <p>{{ $t('common.triedAmount') }} = {{ $t('common.dayTriedNumber') }}</p><!--到期笔数-->
                                <p>{{ $t('common.repayNumber') }} = {{ $t('common.dayRepayNumber') }}</p><!--已还笔数-->
                                <p>{{ $t('common.triedShouldRepayAmount') }} = {{ $t('common.dayTriedShouldRepayAmount') }}</p><!--到期应还金额-->
                                <p>{{ $t('common.hasRepayAmount') }} = {{ $t('common.dayHasRepayAmount') }}</p><!--已还金额-->
                                <p>{{ $t('common.firstOverdueRate') }} = {{ $t('common.dayOverdueRate') }}</p><!--逾期率-->
                            </div>
                            <h2 class="mt-20">{{ $t('common.historySummary') }}</h2>
                            <div>
                                <p>{{ $t('common.registerAmount') }} = {{ $t('common.totalRegisterNumber') }}</p><!--注册人数-->
                                <p>{{ $t('common.applyAmount') }} = {{ $t('common.totalApplyNumber') }}</p><!--申请笔数-->
                                <p>{{ $t('common.loanSuccessAmount') }} = {{ $t('common.totalLoanSuccessNumber') }}</p><!--放款成功笔数-->
                                <p>{{ $t('common.loanAmount') }} = {{ $t('common.totalOrderAmount') }}</p><!--放款金额-->
                                <p>{{ $t('common.contractAmount') }} = {{ $t('common.totalContractAmount') }}</p><!--合同金额-->
                                <p>{{ $t('common.passRate') }} = {{ $t('common.totalPassRate') }}</p><!--通过率-->
                                <p>{{ $t('common.loaningNotOverdueNumber') }} = {{ $t('common.totalNotOverdueNumber') }}</p><!--在贷未逾期笔数-->
                                <p>{{ $t('common.overdueNotRepayNumber') }} = {{ $t('common.totalOverdueNumber') }}</p><!--逾期未还笔数-->
                                <p>{{ $t('common.repayNumber') }} = {{ $t('common.totalRepayNumber') }}</p><!--已还笔数-->
                                <p>{{ $t('common.hasRepayAmount') }} = {{ $t('common.totalRepayInaccountAmount') }}</p><!--已还金额-->
                                <p>{{ $t('common.overdueingPrincipal') }} = {{ $t('common.totalOverdueAmount') }}</p><!--逾期金额-->
                                <p>{{ $t('common.overdueRate') }} = {{ $t('common.totalOverdueRate') }}</p><!--逾期率-->
                            </div>
                        </div>
                        <i slot="reference" class="el-icon-question"></i>
                    </el-popover>
                </h4>
            </el-row>

            <div class="todayTotal">
                <div class="left">
                    <div class="title">PHP</div>
                    <div class="data">
                        <div>{{ $t('common.contractAmount') }}：{{ todayData.loanSuccessContractAmount || 0 | formatCurrency }}</div><!--合同金额-->
                        <div>{{ $t('common.loanAmount') }}：{{ todayData.loanSuccessAmount || 0 | formatCurrency }}</div><!--放款金额-->
                    </div>
                </div>
                <div class="right">
                    <div class="title">
                        <div>{{ (todayData.newLoanSuccessNum || 0) + (todayData.oldLoanSuccessNum || 0) + (todayData.secondLoanSuccessNum || 0) }}</div>
                        <div class="text">{{ $t('common.loanSuccess') }}</div><!--放款成功-->
                    </div>
                    <div class="data">
                        <div>{{ $t('common.newUser') }}：{{ todayData.newLoanSuccessNum || 0 }}</div><!--新户-->
                        <div>{{ $t('common.oldUser') }}：{{ todayData.oldLoanSuccessNum || 0 }}</div><!--老户-->
                        <div>{{ $t('common.secNewUser') }}：{{ todayData.secondLoanSuccessNum || 0 }}</div><!--次新户-->
                    </div>
                </div>
            </div>

            <el-row :gutter="20">
                <el-row :gutter="20">
                    <el-col :span="4" align="center">
                        <div class="box">
                            <p class="amount num-s">{{ todayData.registerCount || 0 }}</p>
                            <p>{{ $t('common.registerAmount') }}</p><!--注册人数-->
                        </div>
                    </el-col>
                    <el-col :span="4" align="center">
                        <div class="box">
                            <p class="amount num-s">
                                <el-popover v-if="todayData.loanNum" placement="right" trigger="hover">
                                    <div>{{ $t('common.newUser') }}：{{ todayData.loanNum.newLoanNum || 0 }}</div><!--新户-->
                                    <div>{{ $t('common.oldUser') }}：{{ todayData.loanNum.oldLoanNum || 0 }}</div><!--老户-->
                                    <div>{{ $t('common.secNewUser') }}：{{ todayData.loanNum.secondLoanNum || 0 }}</div><!--次新户-->
                                    <span slot="reference" class="number_detail">{{ todayData.orderCount || 0 }}</span>
                                </el-popover>
                                <span v-else class="number_detail">{{ todayData.orderCount || 0 }}</span>
                            </p>
                            <p>{{ $t('common.applyAmount') }}</p><!--申请笔数-->
                        </div>
                    </el-col>
                    <el-col :span="4" align="center">
                        <div class="box">
                            <p class="amount num-s">{{ todayData.loanSuccessCount || 0 }}</p>
                            <p>{{ $t('common.loanSuccessAmount') }}</p><!--放款成功笔数-->
                        </div>
                    </el-col>
                    <el-col :span="4" align="center">
                        <div class="box">
                            <p class="amount num-s">{{ todayData.loanSuccessAmount || 0 | formatCurrency }}</p>
                            <p>{{ $t('common.loanAmount') }}</p><!--放款金额-->
                        </div>
                    </el-col>
                    <el-col :span="4" align="center">
                        <div class="box">
                            <p class="amount num-s">
                                <el-popover v-if="todayData.auditSuccessRateDetail" placement="right" trigger="hover">
                                    <div>{{ $t('common.newUser') }}：{{ todayData.auditSuccessRateDetail.newAuditSuccessRate || 0 }}%</div><!--新户-->
                                    <div>{{ $t('common.oldUser') }}：{{ todayData.auditSuccessRateDetail.oldAuditSuccessRate || 0 }}%</div><!--老户-->
                                    <div>{{ $t('common.secNewUser') }}：{{ todayData.auditSuccessRateDetail.secondAuditSuccessRate || 0 }}%</div><!--次新户-->
                                    <span slot="reference" class="number_detail">{{ todayData.auditSuccessRate || 0 | formatCurrency }}%</span>
                                </el-popover>
                                <span v-else class="number_detail">{{ todayData.auditSuccessRate || 0 | formatCurrency }}%</span>
                            </p>
                            <p>{{ $t('common.passRate') }}</p><!--通过率-->
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="4" align="center">
                        <div class="box">
                            <p class="amount num-s">
                                <el-popover v-if="todayData.overdueCountDetail" placement="right" trigger="hover">
                                    <div>{{ $t('common.newUser') }}：{{ todayData.overdueCountDetail.newOverdueCount || 0 }}</div><!--新户-->
                                    <div>{{ $t('common.oldUser') }}：{{ todayData.overdueCountDetail.oldOverdueCount || 0 }}</div><!--老户-->
                                    <div>{{ $t('common.secNewUser') }}：{{ todayData.overdueCountDetail.secondOverdueCount || 0 }}</div><!--次新户-->
                                    <span slot="reference" class="number_detail">{{ todayData.overdueCount || 0 }}</span>
                                </el-popover>
                                <span v-else class="number_detail">{{ todayData.overdueCount || 0 }}</span>
                            </p>
                            <p>{{ $t('common.triedAmount') }}</p><!--到期笔数-->
                        </div>
                    </el-col>
                    <el-col :span="4" align="center">
                        <div class="box">
                            <p class="amount num-s">
                                <el-popover v-if="todayData.repaymentSuccessNum" placement="right" trigger="hover">
                                    <div>{{ $t('common.newUser') }}：{{ todayData.repaymentSuccessNum.newRepaymentSuccessNum || 0 }}</div><!--新户-->
                                    <div>{{ $t('common.oldUser') }}：{{ todayData.repaymentSuccessNum.oldRepaymentSuccessNum || 0 }}</div><!--老户-->
                                    <div>{{ $t('common.secNewUser') }}：{{ todayData.repaymentSuccessNum.secondRepaymentSuccessNum || 0 }}</div><!--次新户-->
                                    <span slot="reference" class="number_detail">{{ todayData.repaymentSuccessCount || 0 }}</span>
                                </el-popover>
                                <span v-else class="number_detail">{{ todayData.repaymentSuccessCount || 0 }}</span>
                            </p>
                            <p>{{ $t('common.repayNumber') }}</p><!--已还笔数-->
                        </div>
                    </el-col>
                    <el-col :span="4" align="center">
                        <div class="box">
                            <p class="amount num-s">{{ todayData.overdueAmount || 0 | formatCurrency }}</p>
                            <p>{{ $t('common.triedShouldRepayAmount') }}</p><!--到期应还金额-->
                        </div>
                    </el-col>
                    <el-col :span="4" align="center">
                        <div class="box">
                            <p class="amount num-s">{{ todayData.repaymentSuccessAmount || 0 | formatCurrency }}</p>
                            <p>{{ $t('common.hasRepayAmount') }}</p><!--已还金额-->
                        </div>
                    </el-col>
                    <el-col :span="4" align="center">
                        <div class="box">
                            <p class="amount num-s">
                                <el-popover v-if="todayData.overdueRateDetail" placement="right" trigger="hover">
                                    <div>{{ $t('common.newUser') }}：{{ todayData.overdueRateDetail.newOverdueRate || 0 }}%</div><!--新户-->
                                    <div>{{ $t('common.oldUser') }}：{{ todayData.overdueRateDetail.oldOverdueRate || 0 }}%</div><!--老户-->
                                    <div>{{ $t('common.secNewUser') }}：{{ todayData.overdueRateDetail.secondOverdueRate || 0 }}%</div><!--次新户-->
                                    <span slot="reference" class="number_detail">{{ todayData.overdueRate || 0 | formatCurrency }}%</span>
                                </el-popover>
                                <span v-else class="number_detail">{{ todayData.overdueRate || 0 | formatCurrency }}%</span>
                            </p>
                            <p>{{ $t('common.firstOverdueRate') }}</p><!--首逾率-->
                        </div>
                    </el-col>
                </el-row>
            </el-row>

<!--            <el-row :gutter="24"><h4>{{ $t('common.historySummary') }}</h4></el-row>
            <el-row :gutter="20">
                <el-col :span="4" align="center">
                    <div class="box">
                        <p class="amount num-s">{{ historyData.register || 0 }}</p>
                        <p>{{ $t('common.registerAmount') }}</p>&lt;!&ndash;注册人数&ndash;&gt;
                    </div>
                </el-col>
                <el-col :span="4" align="center">
                    <div class="box">
                        <p class="amount num-s">{{ historyData.application || 0 }}</p>
                        <p>{{ $t('common.applyAmount') }}</p>&lt;!&ndash;申请笔数&ndash;&gt;
                    </div>
                </el-col>
                <el-col :span="4" align="center">
                    <div class="box">
                        <p class="amount num-s">{{ historyData.loanSuccess || 0 }}</p>
                        <p>{{ $t('common.loanSuccessAmount') }}</p>&lt;!&ndash;放款成功笔数&ndash;&gt;
                    </div>
                </el-col>
                <el-col :span="4" align="center">
                    <div class="box">
                        <p class="amount num-s">{{ historyData.loanAmount || 0 | formatCurrency }}</p>
                        <p>{{ $t('common.loanAmount') }}</p>&lt;!&ndash;放款金额&ndash;&gt;
                    </div>
                </el-col>
                <el-col :span="4" align="center">
                    <div class="box">
                        <p class="amount num-s">{{ historyData.contractAmount || 0 | formatCurrency }}</p>
                        <p>{{ $t('common.contractAmount') }}</p>&lt;!&ndash;合同金额&ndash;&gt;
                    </div>
                </el-col>
                <el-col :span="4" align="center">
                    <div class="box">
                        <p class="amount num-s">{{ historyData.successRate || 0 | formatCurrency }}%</p>
                        <p>{{ $t('common.passRate') }}</p>&lt;!&ndash;通过率&ndash;&gt;
                    </div>
                </el-col>
                <el-col :span="4" align="center">
                    <div class="box">
                        <p class="amount num-s">{{ historyData.unLoanNoOverdue || 0 }}</p>
                        <p>{{ $t('common.loaningNotOverdueNumber') }}</p>&lt;!&ndash;在贷未逾期笔数&ndash;&gt;
                    </div>
                </el-col>
                <el-col :span="4" align="center">
                    <div class="box">
                        <p class="amount num-s">{{ historyData.overdueNoRepay || 0 }}</p>
                        <p>{{ $t('common.overdueNotRepayNumber') }}</p>&lt;!&ndash;逾期未还笔数&ndash;&gt;
                    </div>
                </el-col>
                <el-col :span="4" align="center">
                    <div class="box">
                        <p class="amount num-s">{{ historyData.successRepay || 0 }}</p>
                        <p>{{ $t('common.repayNumber') }}</p>&lt;!&ndash;已还笔数&ndash;&gt;
                    </div>
                </el-col>
                <el-col :span="4" align="center">
                    <div class="box">
                        <p class="amount num-s">{{ historyData.repayAmount || 0 | formatCurrency }}</p>
                        <p>{{ $t('common.hasRepayAmount') }}</p>&lt;!&ndash;已还金额&ndash;&gt;
                    </div>
                </el-col>
                <el-col :span="4" align="center">
                    <div class="box">
                        <p class="amount num-s">{{ historyData.overdueAmount || 0 | formatCurrency }}</p>
                        <p>{{ $t('common.overdueingPrincipal') }}</p>&lt;!&ndash;在逾本金&ndash;&gt;
                    </div>
                </el-col>
                <el-col :span="4" align="center">
                    <div class="box">
                        <p class="amount num-s">{{ historyData.overdueRate  | formatCurrency }}%</p>
                        <p>{{ $t('common.overdueRate') }}</p>&lt;!&ndash;逾期率&ndash;&gt;
                    </div>
                </el-col>
            </el-row>-->
        </div>
    </div>
</template>

<script>
    export default {
        name: 'home',
        data() {
            return {
                // form: {
                //     product:''
                // },
                nowAppName: '',
                rules: {},
                appList: [],
                historyData: {},
                todayData: {},
                form: {
                    appName: ''
                },
            };
        },
        mounted() {
            // this.getData();
            this.getCompanyList();
        },
        methods: {
            getData() {
                // this.getHistoryData();
                this.getTodayData();
            },
            getHistoryData() {
                const params = {
                    appName: this.form.appName
                };
                this.$api.report.queryHistoricalSummaryData(params).then(res => {
                    const { status, data, error } = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.nowAppName =  this.form.appName;
                        this.historyData = data;
                        this.historyData.overdueRate = data.overdueRate ? (Number(data.overdueRate)*100).toFixed(2) : 0;
                        // this.historyData.successRate = data.successRate ? (Number(data.successRate)*100).toFixed(2) : 0;
                    }
                })
            },
            getTodayData() {
                const params = {
                    appName: this.form.appName
                };
                this.$api.report.querydaystatistics(params).then(res => {
                    this.nowAppName =  this.form.appName;
                    const { status, data, error } = res;
                    if ('1' === status && '00000000' === error && data) {
                        if (!data.loanNum) data.loanNum = {};
                        if (!data.auditSuccessRateDetail) data.auditSuccessRateDetail = {};
                        if (!data.overdueCountDetail) data.overdueCountDetail = {};
                        if (!data.repaymentSuccessNum) data.repaymentSuccessNum = {};
                        if (!data.overdueRateDetail) data.overdueRateDetail = {};
                        this.todayData = data;
                    }
                });
            },
            search() {
                this.getData();
            },
            getCompanyList() {
                const params = {
                    appListDomain: this.$storage.get('user').domain,
                };
                this.$api.systemManage.getAppListdomain(params).then((res) => {
                    const {status, data, error} = res;
                    if ('1' === status && error === '00000000') {
                        this.appList = data || [];
                        this.form.appName = this.appList[0].name;
                        this.getData();
                    }
                });
            },
        }
    }
</script>

<style lang="scss" scoped>
    @import "~@/assets/scss/function";
    h4 {
        font-size:18px;
        color:#a3e2d9;
        height:46px;
        line-height:46px;
        padding:0 0 10px 10px;
        border-bottom: 5px solid #a3e2d9;
    }
    h3 {
        margin-top: 5px;
    }
    .preview_box {
        color:#666;
        .amount {
            color:#a3e2d9;
        }
        .num {
            font-size:46px;
            font-weight: bold;
            line-height:60px;
            margin:0 0 10px 0;
        }
        .num-s {
            font-size:18px;
            font-weight: bold;
        }
        .title {
            font-size:20px;
            font-weight: bold;
        }
        .fs-18 {
            font-size:18px;
        }
        .box {
            background: #efefef;
            padding:30px 0;
            font-size: 14px;
            margin:20px 0 0 0;
            min-height:150px;
            .amount {
                font-size: 20px;
                margin:0 0 10px 0;
            }
        }
    }
    .content_panel_top {
        padding-bottom:8px;
    }
    .todayTotal {
        display: flex;
        align-items: center;
        padding:20px 0 10px 0;
        .left {
            display: flex;
            flex: 1;
            align-items: center;
            justify-content: center;
            border-right:1px solid #ddd;
        }
        .right {
            display: flex;
            flex: 1;
            align-items: center;
            text-align: center;
            justify-content: center;
        }
        .title {
            font-size: 50px;
            color:#a3e2d9;
            line-height:50px;
            padding:0 20px 0 0;
            text-align: right;
            flex: 2;
            .text {
                font-size: 18px;
                line-height:22px;
            }
        }
        .data {
            flex: 3;
            text-align: left;
            font-size: 16px;
            line-height:30px;
            font-weight: 800;
        }
    }
    .content_panel_top {
        .el-form-item {
            margin: 0;
            .el-button {
                margin-top: 5px;
            }
        }
    }
    .el-icon-question {
        position: absolute;
        right:0;
        top:0;
        font-size: 42px;
    }
    .explanationDialog {
        max-height: 500px;
        overflow: auto;
        line-height:20px;
        p {
            margin: 6px 0 0 0;
        }
        h2 {
            font-size: 16px;
            font-weight: bold;
        }
        .mt-20 {
            margin-top:20px;
        }
    }
    .module_form {
        padding: 0;
    }
    .appname_title {
        color: #47c5b2;
        font-size: 16px;
        position: relative;
        height: 20px;
        line-height: 20px;
    }

    .number_detail{
        cursor: pointer;
    }
</style>
